<template>
  <div>
    <!-- <div class="bg_grey_all"></div> -->
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >新增车辆</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell title="填写车辆信息" class="bg_grey" />
        <van-form>
          <!-- 用途 -->
          <van-field
            readonly
            clickable
            name="picker"
            :value="usage_type"
            label="用途"
            placeholder="点击选择用途"
            @click="show_usageType_list = true"
          />
          <van-popup v-model="show_usageType_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="usage_typs_list"
              @confirm="onUsageTypeSelected"
              @cancel="show_usageType_list = false"
            />
          </van-popup>

          <!-- 车牌号 -->
          <van-field
            readonly
            clickable
            name="picker"
            :value="vehicleNumber"
            label="车牌号"
            placeholder="点击选择车牌号"
            @click="show_vehicleNumber_list = true"
          />
          <van-popup v-model="show_vehicleNumber_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="vehicleNumber_list"
              @confirm="onVehicleNumberSelected"
              @cancel="show_vehicleNumber_list = false"
            />
          </van-popup>

          <!-- 品牌 -->
          <van-field
            readonly
            clickable
            name="picker"
            :value="vehicleBrand"
            label="品牌"
            placeholder="点击选择品牌"
            @click="show_vehicleBrand_list = true"
          />
          <van-popup v-model="show_vehicleBrand_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="vehicleBrand_list"
              @confirm="onVehicleBrandSelected"
              @cancel="show_vehicleBrand_list = false"
            />
          </van-popup>

          <!-- 车系 -->
          <van-field
            readonly
            clickable
            name="picker"
            :value="vehicleSeries"
            label="车系"
            placeholder="点击选择车系"
            @click="show_vehicleSeries_list = true"
          />
          <van-popup v-model="show_vehicleSeries_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="vehicleSeries_list"
              @confirm="onVehicleSeriesSelected"
              @cancel="show_vehicleSeries_list = false"
            />
          </van-popup>

          <van-field
            v-model="vehicle.remark"
            name="车型描述"
            label="车型描述"
            placeholder="请输入车型描述"
          />

          <van-field
            v-model="vehicle.vinNo"
            name="VIN号"
            label="VIN号"
            placeholder="请输入VIN号"
          />

          <van-field
            readonly
            clickable
            name="picker"
            :value="vehicleColors"
            label="车辆颜色"
            placeholder="请选择颜色"
            @click="show_vehicleColors_list = true"
          />
          <van-popup v-model="show_vehicleColors_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="vehicleColors_list"
              @confirm="onVehicleColorsSelected"
              @cancel="show_vehicleColors_list = false"
            />
          </van-popup>

          <!-- <van-field
            v-model="colorDes"
            name="颜色描述"
            label="颜色描述"
            placeholder="请输入颜色描述"
          /> -->
          <van-field name="uploader" label="车辆照片">
            <template #input>
              <van-uploader max-count=1 :after-read="onRead1" v-model="uploader1" />
            </template>
          </van-field>

          <van-field name="uploader" label="行驶证照片">
            <template #input>
              <van-uploader max-count=1 :after-read="onRead2" v-model="uploader2" />
            </template>
          </van-field>

          <div style="margin: 16px">
            <van-button block type="primary" @click="commit">提交</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../../api/api_config";
import Vehicle from '../../../../model/vehicle';
import { Toast, Notify  } from 'vant'

export default {
  data() {
    return {
      vehicle: {},
      vehicleNumber: "",
      vehicleNumber_list: [],
      show_vehicleNumber_list: false,

      vehicleBrand: "",
      vehicleBrand_list: [],
      show_vehicleBrand_list: false,

      vehicleSeries: "",
      vehicleSeries_list: [],
      show_vehicleSeries_list: false,

      vehicleColors: "",
      vehicleColors_list: [],
      show_vehicleColors_list: false,

      show_usageType_list: false,
      usage_type: "",
      usage_typs_list: [{text: "试驾车辆", id: 1}, {text: "客用车辆", id: 2}, {text: "救援车辆", id: 3}],

      uploader1: [],
      uploader2: [],
      seriesDes: "",
      vehicleVIN: "",
      colorDes: "",
    };
  },
  created() {
    this.initData();
  },
  mounted() {
  },
  methods: {
    initData() {
      this.$store.state.tab_show = false
      this.currentUser = this.$store.state.configuration.currentUser;
      this.vehicle = new Vehicle();
      this.vehicle.userId = this.currentUser.id
      this.vehicle.companyId = this.currentUser.depId
      this.queryPickerItem();
    },
    back() {
      this.$router.push("/carUsage/carManage");
    },
    onVehicleNumberSelected(value) {
      this.vehicleNumber = value.text;
      this.vehicle.plateNum = value.text;
      this.show_vehicleNumber_list = false;
    },
    onVehicleBrandSelected(value) {
      this.vehicleBrand = value.text
      this.querySeries(value)
      // this.vehicle.vehicleBrand = value
      this.vehicle.brandId = value.id
      this.show_vehicleBrand_list = false
    },
    onVehicleSeriesSelected(value) {
      this.vehicleSeries = value.text;
      // this.vehicle.vehicleSeries = value
      this.vehicle.seriesId = value.id
      this.show_vehicleSeries_list = false;
    },
    onUsageTypeSelected(value) {
      this.usage_type = value.text;
      this.vehicle.vehicleType = value.id;
      this.show_usageType_list = false;
    },
    onVehicleColorsSelected(value) {
      this.vehicleColors = value;
      this.vehicle.vehicleColor = value
      this.show_vehicleColors_list = false;
    },

    queryPickerItem() {
      let that = this;
      Promise.all([
        this.getItems(
          Api.vehicleBrand.vehicleBrand.method,
          Api.vehicleBrand.vehicleBrand.url
        ),
        this.getItems(
          Api.vehicleColors.colors.method,
          Api.vehicleColors.colors.url
        ),
        this.getItems(
          Api.vehiclePlate.vehiclePlate.method,
          Api.vehiclePlate.vehiclePlate.url
        ),
      ]).then((responses) => {
        // console.log(responses);
        that.vehicleBrand_list = that.addProp(
          responses[0].data.items,
          "text",
          "brandName"
        );
        that.vehicleColors_list = responses[1].data;
        that.vehicleNumber_list = that.addProp(
          responses[2].data.items,
          "text",
          "plateName"
        );
      });
    },
    getItems(method, url) {
      let that = this;
      return new Promise(function (resolve, reject) {
        that
          .$axios({
            method: method,
            url: url,
          })
          .then(function (res) {
            resolve(res);
          })
          .catch(function (e) {
            reject(e);
          });
      });
    },
    querySeries(brand) {
      let that = this;
      this.$axios({
        method: Api.vehicleSeries.vehicleSeries.method,
        url: Api.vehicleSeries.vehicleSeries.url + "?BrandId=" + brand.id,
      })
        .then(function (res) {
          that.vehicleSeries_list = that.addProp(
            res.data.items,
            "text",
            "seriesName"
          );
        })
        .catch(function (e) {
          console.log(e);
        });
    },
    addProp(list, text, value) {
      if (list === null && list === undefined && list.length === 0) {
        return;
      }
      for (let i = 0; i < list.length; i++) {
        const element = list[i];
        element[text] = element[value];
      }
      return list;
    },
    onRead1(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
      });
      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          that.vehicle.vehicleFilelist[0].id = response.data[0].id
          that.vehicle.vehicleFilelist[0].type = 5
          Toast.clear()
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    onRead2(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
      });
      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          that.vehicle.licenseFilelist[0].id = response.data[0].id
          that.vehicle.licenseFilelist[0].type = 6
          Toast.clear()
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    commit() {
      let that = this
      if (this.formValidate() === false) {
        return
      }
      this.$axios({
            method: Api.Vehicle.post_vehicle.method,
            url: Api.Vehicle.post_vehicle.url,
            data: this.vehicle
          })
        .then(function () {
          // Toast.clear()
          Toast.success('添加成功')
          that.$router.push('/carUsage/carManage')
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    formValidate() {

      if (this.vehicle.vehicleType === 0) {
        Notify({ type: 'warning', message: '请选择车辆用途' });
        return false
      }

      if (this.vehicle.plateNum === "") {
        Notify({ type: 'warning', message: '请选择车牌' });
        return false
      }

      if (this.vehicle.brandId === 0) {
        Notify({ type: 'warning', message: '请选择车辆品牌' });
        return false
      }

      if (this.vehicle.seriesId === 0) {
        Notify({ type: 'warning', message: '请选择车辆车系' });
        return false
      }

      if (this.vehicle.remark === "") {
        Notify({ type: 'warning', message: '请输入车型描述' });
        return false
      }

      if (this.vehicle.vehicleColor === "") {
        Notify({ type: 'warning', message: '请选择车辆颜色' });
        return false
      }

      if (this.vehicle.vinNo === "") {
        Notify({ type: 'warning', message: '请输入VIN号' });
        return false
      }

      if (this.vehicle.vehicleFilelist[0].id === -1) {
        Notify({ type: 'warning', message: '请上传车辆照片' });
        return false
      }

      if (this.vehicle.licenseFilelist[0].id === -1) {
        Notify({ type: 'warning', message: '请上传行驶证照片' });
        return false
      }
    }
  },
};
</script>

<style scoped>
</style>
